<template>
  <el-drawer
    title="字典列表"
    append-to-body
    :size='600'
    @open='open'
    :visible.sync="visible"
    :before-close="close">
      <ref-table ref='crud' :option='option' :search.sync='search' :data.sync='data' :page.snyc='page' @selectionChange='selectionChange'>
        <template #action>
          <div class='mb10'>
            <el-button type='primary' size='small' icon='el-icon-plus' @click='showDialog("add")'>新增</el-button>
            <el-button type='primary' size='small' icon='el-icon-delete' @click='delRow(2)' :loading='btnLoading'>删除</el-button>
          </div>
        </template>
        <template #menu = '{row}'>
          <el-button type='text' size='mini' icon='el-icon-edit' @click='showDialog("edit",row)'>编辑</el-button>
          <el-button type='text' size='mini' icon='el-icon-delete' @click='delRow(1, row)'>删除</el-button>
        </template>
      </ref-table>
      <table-dialog
        :visible.snyc='dialogVisible'
        :type='type'
        :detail = 'more'
        @addRow = 'addRow'
        @editRow = 'editRow'
        @close='showDialog'
        :option='option' />
  </el-drawer>
</template>
<script>
  import refTable from '@/plugins/table/';
  import tableDialog from '@/plugins/table/dialog';
  export default {
    props: ['visible', 'detail'],
    components: {
      refTable,
      tableDialog
    },
    data () {
      return {
        dialogVisible: false,
        search: {},
        data: [],
        page: {
          total: 0,
          size: 10,
          current: 1
        },
        btnLoading: false,
      }
    },
    created () {
      this.option = {
        queryUrl: '/dataDictionary/queryDataDictionaryList',
        menu: true,
        width: 80,
        selection: true,
        hideTittle: true,
        dialogWidth: '800px',
        column: [
          {
            label: '名称',
            prop: 'key_name',
            searchWidth: 55, // 搜索
            search: true,
            rules: [
              {
                required: true,
                message: '请输入名称'
              }
            ]
          },
          {
            label: '数据值',
            prop: 'key_value',
            rules: [
              {
                required: true,
                message: '请输入数据值'
              }
            ]
          }
        ]
      };
      this.type = 'add';
      // 记录当前要编辑的行
      this.more = {};

      // 批量删除记录
      this.selection = [];
    },
    
    methods: {
      selectionChange (selection) {
        console.log(selection)
        this.selection = selection;
      },
      showDialog (type, row) {
        this.type = type;
        if (type !== 'add') {
          this.more = row;
        }
        this.dialogVisible = !this.dialogVisible;
      },
      // 新增
      addRow (row, done, loading) {
        const params = {
          dic_bh: this.detail.bh,
          ...row
        }
        this.axios({
          url: '/dataDictionary/insertDataDicList',
          method: 'post',
          data:params
        }).then(() => {
          this.$message.success('添加成功');
          done();
          this.$refs.crud.onLoad();
        }).catch(() => {
          loading();
        })
      },
      // 编辑
      editRow (row, done, loading) {
        this.axios({
          url: '/dataDictionary/updateDataDicList',
          method: 'post',
          data:{
            ...row
          }
        }).then(() => {
          this.$message.success('修改成功');
          done();
          this.$refs.crud.onLoad();
        }).catch(() => {
          loading();
        })
      },
      // 删除
      delRow (type, row) {
        let data = []
        if (type ==1) {
          data.push(row.id)
        } else {
          this.btnLoading = true;
          if (!this.selection || !this.selection.length) {
            this.btnLoading = false;
            this.$message.error('请至少选择一项要删除的数据');
            return;
          } else {
            this.selection.map(item => {
              data.push(item.id)
            })
          }
        }
        this.axios({
          url: '/dataDictionary/deleteDataDicList',
          method: 'post',
          data:{
            array: data
          }
        }).then(() => {
          this.btnLoading = false;
          this.$message.success('操作成功');
          this.$refs.crud.clearSelection();
          this.$refs.crud.onLoad();
        }).catch(() => {
          this.btnLoading = false;
        })
      },
      open () {
        this.search = {
          "dic_bh": this.detail.bh
        };
        this.page = {
          total: 0,
          size: 10,
          current: 1
        }
        this.$nextTick(() => {
          this.$refs.crud.clearSelection();
          this.$refs.crud.onLoad();
        })
      },
      close () {
        this.$emit('close');
      }
    }
  }
</script>